<template>
  <div>
    <section class="main" v-cloak>
      <input
        class="toggle-all"
        id="toggle-all"
        type="checkbox"
        :checked="allChk"
        @change="amendAll(!allChk)"
      />
      <label for="toggle-all"></label>
      <ul class="todo-list">
        <TodoItem v-for="(todo,index) in NewArr" :key="index" :todo="todo" />
      </ul>
    </section>
  </div>
</template>

<script>
import TodoItem from "./Todoltem";
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("todo", ["TodoArr"]),
    ...mapGetters("todo", ["NewArr"]),
    allChk() {
      return this.TodoArr.every(v => v.completed);
    }
  },
  methods: {
    ...mapActions("todo", ["amendAll"])
  },
  components: {
    TodoItem
  }
};
</script>

<style scoped>

</style>